<template>
  <div>
    <el-dialog class="select-prod" title="确定卸载信息" :visible.sync="delcarprodvis" @close="close" width="1000px" append-to-body :close-on-click-modal='false'>

      <el-row>
        <el-col :span="24">
          <el-table :data="delcarProded" border style="width: 100%">
            <!-- <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="categoryTwoName" label="装备细类"></el-table-column> -->
            <el-table-column prop="prodCode" label="装备编号" width="120"></el-table-column>
            <el-table-column prop="prodName" label="装备名称" width="120"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格"></el-table-column>
            <el-table-column prop="num" label="已存数"></el-table-column>
            <!-- <el-table-column prop="prodNum" label="卸载数">
              <template slot-scope="scope">
                <div>
                  <el-input onkeyup="value=value.replace(/[^\d]/g,'')" size="mini" 
                    v-model="scope.row.prodNum" @input="changeNums($event,scope.row)"
                    placeholder="请输入数字"
                  ></el-input>
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="emit" label="单位"></el-table-column> -->
            <el-table-column prop="prodArea" label="库区" width="130">
              <template slot-scope="scope">
                <div>
                  <el-select v-model="scope.row.prodArea" placeholder="请选择" size="mini" @change="choseArea">
                    <el-option
                      v-for="item in arealist"
                      :key="item.areaId"
                      :label="item.areaName"
                      :value="item.areaId">
                    </el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="prodDepart" label="库位" width="120">
              <template slot-scope="scope">
                <div>
                  <el-select v-model="scope.row.prodDepart" placeholder="请选择" size="mini">
                    <el-option
                      v-for="item in departlist"
                      :key="item.departmentId"
                      :label="item.departmentCode"
                      :value="item.departmentId">
                    </el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="prodDate" label="到期时间" width="144">
              <template slot-scope="scope">
                <div>
                  <el-date-picker  style="width:128px" size="mini" type="date" placeholder="选择日期" v-model="scope.row.prodDate"></el-date-picker>
                </div>
              </template>   
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-delete" @click="selectCarDetail(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>


        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">取 消</el-button>
          <el-button size="small" type="primary" :loading="submitLoading" @click="selectprodSuccess()">确 定</el-button>
        </div>

        <del-stock-detail :openDelcarProd.sync="openDelcarProd" :carprodId="carprodId"></del-stock-detail>
    </el-dialog>
  </div>
</template>

<script>
import { FindStoreArea, FindAreaDepart} from '@/api/store.js';
import { delProdFromCar } from '@/api/car.js';
import { getStore } from '@/utils/app.js';
import delStockDetail from '@/views/carmanage/delStockDetail';
export default {
  name: 'selectnum',
  components: {
    delStockDetail
  },
  props: ['delSelectCarprod', 'selectedProd'],
  data() {
    return {
      delcarprodvis: false,
      submitLoading: false,
      formLabelWidth: '90px',
      delcarProded: [],
      arealist: [],
      departlist: [],
      openDelcarProd: false, // 打开选择详情
      carprodId: null,
    }
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
    getSelectprod() {
      return this.$store.state.ware.selectProds;
    },
    getSelectDetail() {
      return this.$store.state.ware.stockDetail;
    },
  },
  watch: {
      delSelectCarprod(newVal) {
          this.delcarprodvis = newVal;
      },
      selectedProd(newVal) {
          this.delcarProded = newVal;
      },
      openDelcarProd(newVal) {
        if (!newVal) {
          this.delcarProded.forEach( e => {
            if (e.carprodId == this.carprodId) {
              let delselectedArr = [];
              this.getSelectDetail.forEach( m => {
                delselectedArr.push(m.stockdetailsId)
              })
              e.stockDetails = delselectedArr
            }
          })
        }
      },
  },
  mounted() {
    this.getStoreArea()
  },
  methods: {
    // 获取页面仓库和库区
    getStoreArea() {
      FindStoreArea(this.storeid).then( res => {
          this.arealist = res.data;
      })
    },
    // 选择库区显示库位
    choseArea(val) {
      // 根据库区id加载库位数据
      FindAreaDepart(val).then( res => {
        this.departlist = res.data;
      })
    },
    
     // 输入添加数时进行判断
    changeNums(value,item) {
      let newStock = parseInt(item.num);
      let newVal = parseInt(value);
      let ifTrue = newStock - newVal;
      if (ifTrue < 0) {
        this.$message({
          message: '已存数不足,请重新输入',
          type: 'warning'
        })
        item.prodNum = ""
      }
    },
    
    close() {
      this.delcarprodvis = false;
      this.$emit("update:delSelectCarprod", false);
    },
    selectCarDetail(item) {
      console.log(item)
      this.carprodId = item.carprodId;
      this.openDelcarProd = true;
    },
    
    selectprodSuccess() {
      let arrOut = this.delcarProded.filter( el => {    // 未输入卸载数的装备
          if (!el.stockDetails || el.stockDetails.length == 0) {
            return el
          }
      })
      if (arrOut.length != 0) {
        this.$message({
          message: '请选择详情装备',
          type: 'warning'
        })
      } else {
        let reqData = []
        this.delcarProded.forEach( e => {
          let newProdObj = {
            carprodId: e.carprodId,
            num: e.stockDetails.length,
            prodArea: e.prodArea,
            prodDate: e.prodDate,
            prodDepart: e.prodDepart,
            stockDetails: e.stockDetails
          }
          reqData.push(newProdObj)
        })
        delProdFromCar(reqData).then( res => {
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
        })
        this.delcarprodvis = false;
        this.$emit("update:delSelectCarprod", false);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>